<template>
  <div id="main">

    <div id="content">
      <h1>当前操作：查询交易记录</h1>
      <div id="data">
        <span>查询日期范围：</span>
        <el-date-picker
          v-model="formInline.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
        <span>到</span>
        <el-date-picker
          v-model="formInline.endTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>

      </div>
    </div>

    <div id="tip" v-show="showTip">
      <h1>此时间范围内没有交易记录</h1>
    </div>

    <div id="table" v-show="showTable">
      <div id="tablePadding">
        <el-table
          :data="tableData"
          stripe>
          <el-table-column
            prop="transactionDate"
            label="交易日期">
          </el-table-column>
          <el-table-column
            prop="expense"
            label="支出">
          </el-table-column>
          <el-table-column
            prop="income"
            label="收入">
          </el-table-column>
          <el-table-column
            prop="balance"
            label="账户余额">
          </el-table-column>
          <el-table-column
            prop="transactionType"
            label="交易类型">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        background
        layout="prev, pager, next"
        :pager-count="pageCount"
        :page-size="formInline.pageSize"
        :page-count="formInline.pageNum"
        :total="formInline.total"
        class="el-nav"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {post} from "../../common/request";

export default {
  name: "SearchHistory",
  data() {
    return {
      tableData: [],
      formInline: {
        startTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      pageCount: 5,
      showTable: false,
      showTip: false
    }
  },
  methods: {
    getData() {
      post("/transactionRecord/searchHistory", this.formInline).then(x => {
        if (x.code === 1) {
          let list = x.data.list;
          if (list == null || list.length === 0) {
            this.showTable = false;
            this.showTip = true;
          } else {
            this.tableData = list;
            //同时需要改变分页插件的配置数据
            this.formInline.pageNum = x.data.pageNum;
            this.formInline.pageSize = x.data.pageSize;
            this.formInline.total = x.data.total;

            this.showTip = false;
            this.showTable = true;
          }
        } else {
          this.$message.error(x.msg);
        }
      })
    },
    search() {
      this.getData();
    },
    handleCurrentChange(val) {
      //改变当前的页码
      this.formInline.pageNum = val;
      this.getData();
    }
  }
}
</script>

<style scoped>
#main {
  background-color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column;
}

#content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#data {
  margin-top: 20px;
}

#table {
  margin: 0 40px;
  background-color: white;
}

#tablePadding {
  padding: 10px 20px;
}

.el-nav {
  margin: 15px 0;
  text-align: center;
}

#tip {
  text-align: center;
  margin-top: 10%;
}
</style>
